<template>
  <div class="attention-more">
    <div v-if="$store.state.device !== 'APP'" class="nav_top_list">
      <van-icon name="arrow-left" class="left_btn" @click="$router.go(-1)"/>
      <span>用户广场</span>
      <div  v-if="!($store.state.device === 'APP' || $store.state.gsign === 'qxym')"  class="btn_right">
        <a :href="'/elective-choose?school_id=407&center_id=8038&gsign='+$store.state.gsign+'&uniacid='+$store.state.uniacid+'&openid='+$store.state.openid"><img src="../../../assets/img/modules/media/icon_28.png" alt=""></a>
        <a :href="'/user-member?device='+$store.state.device+'&gsign='+$store.state.gsign+'&uniacid='+$store.state.uniacid+'&openid='+$store.state.openid"><img src="../../../assets/img/modules/media/icon_24.png" alt=""></a>
        <a href="javascript:;">
          <img src="../../../assets/img/modules/media/icon_25.png" alt="">
          <img class="active" src="../../../assets/img/modules/media/icon_26.png" alt="">
        </a>
      </div>
    </div>
    <div :class="$store.state.device !== 'APP'?'tab_list' : 'tab_list app_nav'">
      <div v-for="item in userList" :key="item.userId" class="tab_item">
        <img :src="item.avatar" alt="">
        <img v-if="item.isV !== 1" class="v_img" src="../../../assets/img/modules/media/icon_v2_2.png" alt="">
        <div class="text_body" @click="$router.push({ path:'/media-personal', query:{ id: item.userId }})">
          <div class="name">{{item.user_nickName}}</div>
<!--          <div class="introduce">自然界的夜美妙，恬静</div>-->
          <div class="attention">
            <span>关注：{{item.followCount?item.followCount : 0}}</span>
            <span>粉丝：{{item.fansCount?item.fansCount : 0}}</span>
          </div>
        </div>
        <button :class="item.isConcerned !== 1 ? 'active':''" @click="setAttention(item.userId, item)">{{item.isConcerned !== 1?'已关注':'关注'}}</button>
      </div>
    </div>
    <div class="footer_btn">
      <a href="javascript:;" @click="getUserList">换一批</a>
      <a href="javascript:;" class="con" @click="setIdList">全部关注</a>
    </div>
  </div>
</template>
<script>
import mediaMixins from '@/utils/modules/media'
export default {
  mixins: [mediaMixins],
  name: 'attention-more',
  components: {},
  data () {
    return {
      userList: [], // 博主列表
      idList: [] // 博主ID列表
    }
  },
  props: {},
  watch: {},
  methods: {
    /*
     *@author wf_Huang
     *@Time 2019/8/14 0014 13:31
     *@function  关注全部
     *****************************************/
    setIdList () {
      this.userList.forEach(item => {
        this.idList.push(item.userId)
      })
      this.$http({
        url: `${window.SITE_CONFIG['mediaURL']}/wpfans/addFans?openId=${this.$store.state.openid}&listIds=${this.idList.join(',')}`,
        method: 'post',
        withCredentials: false
      }).then(({ data: res }) => {
        if (res.code !== 200) {
          this.$toast('关注失败')
        }
        this.$toast('关注成功')
        this.userList.forEach(item => {
          item.isConcerned = 0
        })
      }).catch(() => {})
    }
  },
  computed: {
  },
  created () {
  },
  mounted () {
    this.getUserList()
  },
  destroyed () {
  }
}
</script>
<style lang="scss" scoped>
  .attention-more {
    .nav_top_list{
      z-index: 9;
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 32px;
      box-shadow: 0 0 15px rgba(0,0,0,0.1);
      margin-bottom: 30px;
      position: fixed;
      top: 0;
      right: 0;
      left: 0;
      background-color: #ffffff;
      .left_btn{
        color: #999999;
        font-size: 32px;
        margin-right: 130px;
      }
      span{
        font-size: 32px;
        color: #181818;
        font-weight: bold;
        position: absolute;
        top: 50px;
        left: 50%;
        transform: translate(-50%, -50%);
      }
      .btn_right{
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        a{
          height: 100%;
          display: flex;
          padding: 0 10px;
          position: relative;
          img{
            width: 36px;
            height: 34px;
          }
          .active{
            width: 18px;
            height: 18px;
            position: absolute;
            right: 5px;
            top: 1px;
          }
        }
      }
    }
    .tab_list{
      padding: 140px 32px 160px;
      .tab_item{
        display: flex;
        justify-content: space-between;
        margin-bottom: 40px;
        position: relative;
        img{
          width: 80px;
          height: 80px;
          border: 1px solid #E5E5E5;
          border-radius: 65px;
          display: block;
          margin-right: 20px;
        }
        .v_img{
          position: absolute;
          top: 50px;
          left: 50px;
          width: 25px;
          height: 25px;
        }
        .text_body{
          width: 75%;
          margin-right: 20px;
          .name{
            font-size: 32px;
            color: #222222;
            margin: 5px 0;
          }
          .introduce{
            font-size: 26px;
            color: #999999;
            overflow: hidden;
            text-overflow:ellipsis;
            white-space: nowrap;
            margin: 10px 0 5px;
          }
          .attention{
            font-size: 26px;
            color: #999999;
            span{
              margin-right: 20px;
            }
          }
        }
        button{
          background: #027FFE;
          border-radius: 4px;
          font-size: 24px;
          color: #FFFFFF;
          width: 109px;
          height: 54px;
          border: 0;
          display: block;
          float: right;
          margin-top: 10px;
        }
        .active{
          background: #EEEEEE;
          color: #222222;
        }
      }
    }
    .footer_btn{
      padding: 32px;
      display: flex;
      justify-content: space-between;
      box-shadow: 0 0 15px rgba(0,0,0,0.1);
      position: fixed;
      bottom: 0;
      right: 0;
      left: 0;
      background-color: #ffffff;
      a{
        width: 327px;
        height: 76px;
        border: 2px solid #027FFE;
        border-radius: 4px;
        font-size: 28px;
        color: #027FFE;
        line-height: 76px;
        text-align: center;
      }
      .con{
        background-color: #027FFE;
        color: #ffffff;
      }
    }
  }
</style>
